<script setup>
    import { defineProps, reactive, ref, defineEmits } from 'vue';
    import { getArticleDetailAPI, addArticleAPI, editArticleAPI } from '@/api/article'; 
    import { OPERATION_TYPE } from '@/constant';
    import { ElMessage } from 'element-plus';

    // 用于子传父
    const emit = defineEmits()

    // 接收父组件传递的数据，用于区分操作类型
    const props = defineProps({
        operateType: {
            type: String,
            default: ""
        },
        articleId: {
            type: String,
            default: ""
        }
    })
    // 获取文章详情
    const getArticleDetail = async () => {
        // id不为空，获取文章内容
        if(props.articleId) {
            const resp = await getArticleDetailAPI(props.articleId)
            // 保存内容
            Object.keys(articleDetail).forEach((key) => {
                articleDetail[key] = resp[key]
            })
        }
    }
    getArticleDetail()

    // 存储文章详情
    const articleDetail = reactive({
        id: "", // 文章id
        stem: "", // 标题
        content: "" // 内容
    })

    // 数据校验规则
    const rules = ref({
        stem: [
            {required: true, message: "标题不能为空", trigger: "blur"}
        ]
    })

    // 整体校验
    const formRef = ref(null)

    const onConfirm = async () => {
        // 整体校验
        formRef.value.validate((result) => {
        if(!result) {
            // 校验失败，返回并弹出提示框
            return ElMessage.error("标题不能为空！")
        } else {
            // 校验通过，执行以下逻辑
            if(props.operateType === OPERATION_TYPE.add) {
                // -- 新增文章 --
                // 校验通过，调用api新增
                addArticleAPI({
                    stem: articleDetail.stem,
                    content: articleDetail.content
                })
            } else if(props.operateType === OPERATION_TYPE.edit) {
                // -- 编辑文章 -- 
                editArticleAPI(articleDetail)
            }
            // 成功提示
            ElMessage.success("操作成功！")
            // 置空输入框
            Object.keys(articleDetail).forEach((key) => {
                articleDetail[key] = ''
            })
            // 关闭抽屉
            emit('close')
            // 重新加载页面数据
            emit('reload')
        }
        })


    }

    // 取消
    const onCancel = () => {
        // 重置表单，并移除校验结果
        // formRef.value.resetFields()
        // 关闭抽屉
        emit('close')
        // 弹出提示
        ElMessage.info("取消操作")
    }
</script>

<template>
    <!-- 富文本编辑器模块 -->
    <div class="form-box" v-if="props.operateType != OPERATION_TYPE.view">
        <el-form
        label-width="60px"
        :model="articleDetail"
        :rules="rules"
        ref="formRef">
            <!-- 标题 -->
            <el-form-item
            label="标题"
            prop="stem">
                <el-input
                type="text"
                placeholder="请添加标题"
                v-model="articleDetail.stem">
            </el-input>
            </el-form-item>
            <!-- 内容 -->
            <el-form-item
            label="内容">
                <QuillEditor 
                theme="snow"
                toolbar="full" 
                placeholder="请添加内容"
                contentType="html"
                v-model:content="articleDetail.content"/>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
                <el-button
                type="primary"
                @click="onConfirm">确 认</el-button>
                <el-button
                @click="onCancel">取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 预览模块 -->
    <div class="view-box" v-else>
        <el-card>
            <template #header>
                <span>{{ articleDetail.stem }}</span>
            </template>
            <template #default>
                <div v-html="articleDetail.content"></div>
            </template>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
    .form-box {
        :deep(.ql-container) {
            width: 100%;
            height: 350px;
        }
        .el-input {
            height: 40px;
        }
    }
    .view-box {
        :deep(.el-card__header) {
            text-align: center;
            font-style: italic;
            font-size: 22px;

            box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
            background-color: #fff;
        }   
        :deep(.el-card__body) {
            background-color:#FAFCFF;
            line-height: 28px;
            text-indent: 2em;
        }
    }
</style>